<template>
	<view>
		<Tabs :TabList="TabList" :currentTab="current" @tabs="tabsChange">
			<TabPane>
				<view>
					<view class="box" id="scrollidbilbili">
						<view class="conterBox" v-for="(item,index) in dataimgArrl" :key='index'
							v-show="item.path !==''" @click="showmaxImg(item)">
							<view class="imgtitle">
								{{item.name}}
							</view>
							<view>
								<image :src="baseImgUrl+item.path+item.tt_cover" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</TabPane>
			<TabPane>
				<view>
					<waterfallAndSearch  :list="list" @ReachBottom='ReachBottom' @searchOK='searchOK'></waterfallAndSearch>
				</view>
			</TabPane>
			<TabPane>
					<videoList></videoList>
				</TabPane>
			<TabPane>
				<!-- 	 <scroll-view :scroll-top="scrollTop" scroll-y="true"  @scrolltoupper="upper" @scrolltolower="lower"  @scroll="scroll"> -->
				<!-- <WaterfallFlow v-if="list.length > 0" @lower='lower' :list="list" :cityName='list'></WaterfallFlow> -->
				<!-- </scroll-view> -->
			</TabPane>
		</Tabs>
	</view>
</template>

<script>
	import Tabs from '../../components/wiszx-tabs/tabs.vue'
	import TabPane from '../../components/wiszx-tabs/tabPane.vue'
	// import WaterfallFlow from './components/nairenk-waterfall-flow.vue';
	import videoList from './components/videoList.vue';
	import JSONP from 'jsonp'
	// import waterfallsFlow from "@/components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue";
	import waterfallAndSearch from './components/waterfallAndSearch.vue';
	export default {
		data() {
			return {
				keyword: '',
				scrollTop: 0,
				current: 1,
				TabList: [{
						title: '图片'
					},
					{
						title: '素材'
					},
					{
						title: '视频'
					},
				],
				dataimgArrl: [],
				pageObj: {
					num: 1,
					page: 20,
					query: '',
				},
				id: 0, // 使用 marker点击事件 需要填写id
				list: [],

			}
		},
		components: {
			Tabs,
			TabPane,
			videoList,
			// waterfallsFlow,
			waterfallAndSearch
		},
		onShow() {

		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.scrollTop = res.windowHeight
				}
			});

			this.loadimageLsit()
		},
		onPullDownRefresh() {
			this.pageObj.page = 20;
			this.list = [];
			this.loadimageLsit()
		},
		methods: {
			searchOK(d) {
				console.log(d);
				// this.pageObj.query = d;
				// this.pageObj.page = 50;
				// this.list = [];
				// this.loadimageLsit()
				
				uni.navigateTo({
				  url: `./searchDetale?s=${d}`,
				});
				
			},
			ThisWappe(data) {
				console.log(data);
				this.showmaxImg(data)
			},
			upper() {
				console.log('upper11');
			},
			// 页面滚动到底部
			ReachBottom() {
				if (this.pageObj.total <= this.pageObj.num) return
				this.pageObj.num++;
				this.loadimageLsit()
			},
			loadimageLsit() {
				let s = [];
				
				this.http(this.api.unsplashImagelist, this.pageObj).then(data => {
					// num: data.page,page: data.per_page,
					// const obj = {total: data.total_results}
					// this.pageObj = {...this.pageObj,...obj}
					console.log(data);
					data.photos.forEach((item, index) => {
						s.push({
							"id": this.list.length + index,
							"image": item.src.large2x,
							"content": item.alt,
							source:item
						})
					})
					this.list = [...this.list, ...s];
					uni.stopPullDownRefresh();
				})
				
				// this.http(this.api.PexelsFeatured, this.pageObj).then(data => {
				// // this.http(this.api.unsplashImagelist, this.pageObj).then(data => {
				// 	// num: data.page,page: data.per_page,
				// 	const obj = {total: data.total_results}
				// 	this.pageObj = {...this.pageObj,...obj}
				// 	data.photos.forEach((item, index) => {
				// 		s.push({
				// 			"id": this.list.length + index,
				// 			"image": item.src.large2x,
				// 			"content": item.alt,
				// 			source:item
				// 		})
				// 	})
				// 	this.list = [...this.list, ...s];
				// 	uni.stopPullDownRefresh();
				// })
			},
			tabsChange(index) {
				this.current = index
			},
			async getimg() {
				const {
					num,
					page
				} = this.pageObj;
				this.dataimgArrl = await this.http(this.api.silkAll, {
					num,
					page
				});
			},
			onClickItem(index) {
				this.current = index.currentIndex
				console.log(index)
			},
			showmaxImg(data) {
				// const {
				// 	listimgs,
				// 	path
				// } = data;
				// let imgs = [];
				console.log(data)
				uni.previewImage({
					urls: [data.image],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
				// if (Array.isArray(listimgs)) {
				// 	let imgs = listimgs.map(item => {
				// 		return this.baseHttpUrl + path + item
				// 	})
				// 	uni.previewImage({
				// 		urls: [...imgs],
				// 		indicator: 'number',
				// 		loop: true,
				// 		longPressActions: {
				// 			itemList: ["发送给朋友", "保存图片", "收藏"],
				// 			success: (data) => {
				// 				console.log(
				// 					"选中了第" +
				// 					(data.tapIndex + 1) +
				// 					"个按钮,第" +
				// 					(data.index + 1) +
				// 					"张图片"
				// 				);
				// 			},
				// 			fail: (err) => {
				// 				console.log(err.errMsg);
				// 			},
				// 		},
				// 		complete: () => {
				// 			console.log(12222);
				// 		}
				// 	});
				// }
			},
		}
	}
</script>
<style scoped lang="less">
	//#ifdef H5
	.tabs {
		height: 92vh;
	}

	// #endif

	.img-box {
		uni-image {
			width: 100vw;
			height: 90vh;
		}

		.box {
			width: 100%;
			height: 100vh;
			overflow-y: scroll;
			padding: 0;
			scroll-snap-type: y mandatory;
		}

		.conterBox {
			width: 100%;
			height: 100vh;
			scroll-snap-align: start;

			.imgtitle {
				width: 100vw;
				height: 5vh;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.conterBox1 {
			background: #0069D9;
		}

		.conterBox2 {
			background: #55aa7f;
		}
	}
</style>
